<!-- 缴费中心 -->
<template>
  <div class="pay-center">
    <!-- 缴费中心的标题 -->
    <div class="pay-center__title">
      <h2>缴费中心</h2>
    </div>
    <!-- 缴费中心内容 -->
    <div class="pay-center__list">
      <h3>缴费列表</h3>
      <h4>
        请点击
        <b>处理缴费</b>
        ，前往缴费区处理缴费，缴费后点击
        <b>右侧按钮</b> 刷新
        <el-button size="mini" type="primary" class="pay-center__list--refresh" icon="el-icon-refresh-right" circle @click="refresh"></el-button>
      </h4>
      <div class="pay-center__table">
        <el-table :data="payList" border style="width: 100%" height="300" empty-text="您已经全部缴纳完毕！">
          <el-table-column prop="id" label="编号" width="70px"></el-table-column>
          <el-table-column prop="type" label="缴费类别" header-align="center"></el-table-column>
          <el-table-column prop="money" label="缴费金额（元）" width="150px" header-align="center"></el-table-column>
          <el-table-column prop="riseTime" label="缴费单生成时间" header-align="center"></el-table-column>
          <el-table-column prop="name" label="缴费人" header-align="center"></el-table-column>
          <el-table-column prop="desc" label="说明" header-align="center"></el-table-column>
          <el-table-column header-align="center" align="center" width="110">
            <template slot="header" slot-scope="scope">
              <el-button type="danger" size="mini" @click="oneClickPay">一键缴费</el-button>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handlePay(scope.row)">处理缴费</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <h3>缴费区</h3>
      <h4>
        请点击
        <b>确认缴费</b> 进行缴费，有问题请点击
        <b>反馈</b>
      </h4>
      <div class="pay-center__pay-area">
        <el-tabs v-model="chooseTabs" type="card" closable @tab-remove="removeTab" v-if="tabList.length > 0">
          <el-tab-pane v-for="(item, index) in tabList" :key="item.id" :label="item.type" :name="item.id + ''">
            <el-descriptions class="margin-top" :column="2" size="medium" border>
              <template slot="extra">
                <el-button type="danger" size="small" @click="submitBug">反馈</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  编号
                </template>
                {{item.id}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  缴费类型
                </template>
                {{item.type}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  缴费单生成时间
                </template>
                {{item.riseTime}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  缴费金额（元）
                </template>
                {{item.money}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  缴费人
                </template>
                {{item.name}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  说明
                </template>
                {{item.desc}}
              </el-descriptions-item>
            </el-descriptions>
            <el-button class="pay-center__pay-area--button" type="success" size="medium" @click="payAll">确认缴费</el-button>
          </el-tab-pane>
        </el-tabs>
        <el-empty description="暂无缴费清单" v-else></el-empty>
      </div>
    </div>
    <!-- 全部缴费抽屉 -->
    <el-drawer class="pay-center__list--drawer" title="全部缴费" size="50%" :visible.sync="drawerVisible" direction="rtl" :before-close="beforeDrawerClose">
      <div class="drawer__content" v-if="tabList.length">
        <div class="drawer__basic">
          <el-card>
            <div class="drawer__content--title">基本信息</div>
            <el-row :gutter="0">
              <el-col :span="5">流水号：</el-col>
              <el-col :span="16">{{uuid}}</el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="5">处理时间：</el-col>
              <el-col :span="16">{{now}}</el-col>
            </el-row>
            <el-row :gutter="0" style="border:none;margin-bottom:0">
              <el-col :span="5">缴费人：</el-col>
              <el-col :span="16">{{userInfo.name}}</el-col>
            </el-row>
          </el-card>
        </div>
        <div class="drawer__orders">
          <el-card>
            <div class="drawer__content--title">缴费清单</div>
            <div v-for="(value,index) in tabList" :key="value.id">
              <el-row :gutter="0">
                <el-col :span="5">缴费类型：</el-col>
                <el-col :span="16">{{value.type}}</el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="5">缴费单生成时间：</el-col>
                <el-col :span="16">{{value.riseTime}}</el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="5">缴费金额（元）：</el-col>
                <el-col :span="16" style="font-weight:bold">￥{{value.money}}</el-col>
              </el-row>
              <el-row :gutter="0" style="padding-bottom:20px">
                <el-col :span="5">说明：</el-col>
                <el-col :span="16">{{value.desc}}</el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <div class="drawer__price">
          <el-card>
            <div class="drawer__content--title">价格明细</div>
            <el-row :gutter="0">
              <el-col :span="5">总价：</el-col>
              <el-col :span="16">￥{{allPay}}</el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="5">优惠：</el-col>
              <el-col :span="16" class="drawer__price--discount">减￥{{discount}}</el-col>
            </el-row>
            <el-row :gutter="0" style="padding-bottom:20px">
              <el-col :span="5">合计：</el-col>
              <el-col :span="16">￥{{allPay - discount}}</el-col>
            </el-row>
          </el-card>
        </div>
        <div class="drawer__mode">
          <el-card>
            <div class="drawer__content--title">缴费方式</div>
            <el-row :gutter="0">
              <el-col :span="5">
                <img src="../assets/imgs/aliPay.jpeg" width="30" height="30" alt />
              </el-col>
              <el-col :span="15">
                <el-radio v-model="payMode" label="aliPay">支付宝</el-radio>
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="5">
                <img src="../assets/imgs/wechatPay.jpeg" width="30" height="30" alt />
              </el-col>
              <el-col :span="15" style="padding-bottom:20px">
                <el-radio v-model="payMode" label="wechatPay">微信支付</el-radio>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无可缴费内容">
          <el-button type="primary" @click="drawerVisible = false">返回</el-button>
        </el-empty>
      </div>
      <div class="drawer__button" v-if="tabList.length">
        <el-button round type="primary" @click="submitOrder">提交订单</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getPayList, submitPay } from '../api/index';
import tools from '../utils';
export default {
  name: '',
  data() {
    return {
      // 待缴费列表
      payList: [],
      // 默认选择
      chooseTabs: '0',
      // 缴纳区清单
      tabList: [],
      // 总价格
      allPay: 0,
      // 活动优惠
      discount: 0,
      // 支付方式
      payMode: 'aliPay',
      // 订单列表
      orderList: [],
      drawerVisible: false,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    document.body.scrollTop = 0;
    this.$emit('changeNav', 'payCenter');
  },
  computed: {
    uuid() {
      return tools.uuid();
    },
    now() {
      return tools.timestampToTime(new Date());
    },
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'));
    },
  },
  methods: {
    // 刷新
    refresh() {
      this.getList();
      this.$message({
        message: '获取成功！',
        type: 'success',
      });
    },
    // 处理缴费
    handlePay(row) {
      this.$message({
        message: '已在缴费区打开该缴费信息',
        type: 'success',
      });
      if (JSON.stringify(this.tabList).indexOf(JSON.stringify(row)) == -1) {
        row.payTime = tools.timestampToTime(new Date());
        this.tabList.push(row); // 进行动态的操作
      }
      this.chooseTabs = row.id + '';
    },
    // 确认缴费
    payAll() {
      this.drawerVisible = true;
      this.allPay = 0;
      this.orderList = [];
      this.tabList.forEach((n) => {
        this.allPay += n.money;
        this.orderList.push(n.id);
      });
      this.chooseTabs = this.payList[0].id + '';
      console.log(this.orderList);
    },
    // 提交订单
    submitOrder() {
      submitPay(this.orderList).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '缴费成功！',
            type: 'success',
          });
          this.drawerVisible = !this.drawerVisible;
          this.getList();
          this.tabList = [];
        }
      });
    },
    // 一键缴费
    oneClickPay() {
      this.$message({
        message: '已经全部加入到缴费区',
        type: 'success',
      });
      if (this.payList) {
        for (let i = 0; i < this.payList.length; i++) {
          this.payList[i].payTime = tools.timestampToTime(new Date());
          if (JSON.stringify(this.tabList).indexOf(JSON.stringify(this.payList[i])) == -1) {
            this.tabList.push(this.payList[i]);
          }
        }
      }
      if (this.tabList.length > 0) {
        this.chooseTabs = this.payList[0].id + '';
      }
    },
    // drawer关闭前
    beforeDrawerClose() {
      this.drawerVisible = false;
    },
    // 删除tab
    removeTab(targetName) {
      let tabs = this.tabList;
      let activeName = +this.chooseTabs;
      if (activeName === +targetName) {
        tabs.forEach((tab, index) => {
          if (tab.id === +targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.chooseTabs = activeName + '';
      this.tabList = tabs.filter((tab) => tab.id !== +targetName);
    },
    // 获取缴费列表
    getList() {
      let userId = JSON.parse(localStorage.getItem('userInfo')).userId;
      getPayList(userId).then((res) => {
        if (res.code == 200) {
          res.data.forEach((res) => {
            res.riseTime = tools.timestampToTime(res.riseTime);
            res.payTime = tools.timestampToTime(res.payTime);
          });
          this.payList = res.data;
        }
      });
    },
    // 反馈
    submitBug() {
      sessionStorage.setItem('scrollFlag', true);
      this.$router.push(`./homePage`);
    },
  },
};
</script>

<style scoped lang="scss">
.pay-center {
  width: 100%;
  .pay-center__title {
    width: 100%;
    height: 220px;
    background: url('../assets/imgs/blue_top.png') no-repeat;
    background-size: cover;
    h2 {
      color: #fff;
      font-size: 50px;
      line-height: 220px;
      text-align: center;
      letter-spacing: 0.5rem;
    }
  }
  .pay-center__list {
    h3 {
      font-size: 40px;
      text-align: center;
      margin-top: 2rem;
      margin-bottom: 0.5rem;
    }
    h4 {
      margin: 0 220px;
      position: relative;
      text-align: center;
      margin-bottom: 1rem;
      color: #677788;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.6;
    }
    .pay-center__list--refresh {
      position: absolute;
      top: 0;
      right: 0;
    }
    .pay-center__table {
      padding: 0 220px;
      .el-table {
        margin-bottom: 20px;
      }
    }
    .pay-center__pay-area {
      padding: 0 220px;
      height: 330px;
      .pay-center__pay-area--button {
        margin-top: 15px;
        float: right;
        margin-left: 10px;
      }
      .el-empty {
        padding: 50px;
        border: 1px solid #eee;
      }
    }
  }
  .pay-center__list--drawer {
    .drawer__content {
      overflow: scroll;
      overflow-x: hidden;
      width: 100%;
      height: calc(100% - 70px);
      padding: 0 20px;
    }
    .drawer__content--title {
      margin-bottom: 20px;
      font-size: 17px;
      font-weight: bold;
    }
    .drawer__price {
      .el-col:nth-child(even) {
        font-weight: bold;
      }
      .drawer__price--discount {
        font-size: 15px;
        color: red;
      }
    }
    .drawer__mode {
      margin-bottom: 20px;
      .el-col:nth-child(odd) {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          margin-right: 10px;
        }
      }
    }
    .drawer__button {
      width: 100%;
      height: 50px;
      background-color: #fff;
      margin-top: 20px;
      .el-button {
        float: right;
        margin-right: 25px;
      }
    }
  }
}
</style>
<style lang="scss" >
.el-row {
  margin-bottom: 20px;
  &:last-child {
    border-bottom: 1px solid #ccc;
  }
}
.el-collapse-item__content {
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.el-dialog__body {
  padding-top: 10px;
}
.el-descriptions__header {
  margin-bottom: 10px;
}
.el-tabs__header {
  margin-bottom: 10px;
}
.el-drawer__header {
  margin-bottom: 20px;
}
</style>